import { defineComponent, PropType, VNode } from 'vue';
import { ConfigProvider, ConfigProviderProps } from 'ant-design-vue';
import { configProviderProps } from 'ant-design-vue/es/config-provider/context';

import { useConfigContextProvider } from './useConfigProvide';
import { defaultProvide } from './default';
import { SearchButtonProps } from './interface';
import { ValueEnum } from '../../types/index';

const props = () => {
  return {
    ...configProviderProps(),
    renderStatus: {
      type: Function as PropType<(opt: ValueEnum[keyof ValueEnum]) => VNode>,
    },
    renderSearchButton: {
      type: Function as PropType<(opt: SearchButtonProps) => VNode>,
    },
    searchConfigProvider: {
      type: Object as PropType<ConfigProviderProps>,
    },
    toolbarsConfigProvider: {
      type: Object as PropType<ConfigProviderProps>,
    },
    formModalConfigProvider: {
      type: Object as PropType<ConfigProviderProps>,
    },
    showFormModalResultMessage: {
      type: Boolean,
      default: false,
    },
  };
};

export default defineComponent({
  name: 'BoConfigProvider',
  inheritAttrs: false,
  props: props(),
  setup(props, { slots }) {
    useConfigContextProvider({
      renderStatus: props.renderStatus || defaultProvide.renderStatus,
      renderSearchButton:
        props.renderSearchButton || defaultProvide.renderSearchButton,
      searchConfigProvider: props.searchConfigProvider || {},
      toolbarsConfigProvider: props.toolbarsConfigProvider || {},
      formModalConfigProvider: props.formModalConfigProvider || {},
      showFormModalResultMessage: props.showFormModalResultMessage || false,
    });

    return () => <ConfigProvider {...props} v-slots={slots}></ConfigProvider>;
  },
});
